<template>
    <el-col>

        <el-col>
            <el-col class="block">

                <!--添加 Ajax  -->
                <el-table :data="tableData" border style="width: 100%" @selection-change="selsChange" >


                    <!--<el-table-column label="公告编号" prop="noticeId"> &lt;!&ndash;width="180"&ndash;&gt;
                    </el-table-column>-->

                    <el-table-column label="公告标题" prop="noticeName" align="left"> width="300" >
                    </el-table-column>
                    <el-table-column label="公告内容" prop="noticeInfo" align="left"> width="180">
                    </el-table-column>

                    <el-table-column label="公告时间" prop="noticeDateStr" align="left"> width="200">
                    </el-table-column>

                    <el-table-column label="针对人群" prop="noticeTargetStr" align="left"> width="180">
                    </el-table-column>
                    <!-- /*
                     * 创建时间不必要
                     *
                     * */-->
                    <!-- <el-table-column label="创建时间" prop="notCreateDateStr" width="180">
                     </el-table-column>-->

                    <el-table-column label="修改时间" prop="notModifyDateStr" align="left"> width="200">
                    </el-table-column>

                    <el-table-column label="修改人" prop="noticeModifyName" align="left"> width="180">
                    </el-table-column>


                    <!--删除状态不需要 -->
                    <!--<el-table-column label="删除状态" prop="noticeDel"> width="180">
                    </el-table-column>-->

                   <!-- <el-table-column label="操作" fixed="right" width="220">
                        <template scope="scope">
                            &lt;!&ndash; /*
                             * 增加 修改和删除 功能  由于查看定义为handEdit  编辑暂时定义为handLook 新增编辑页面
                             * 为 查看  增加样式 前后保持一致
                             *
                             * */&ndash;&gt;
                            <el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>-->
                </el-table>

                <span class="demonstration"></span>
                <el-pagination style="float:right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-col>
        </el-col>

        <!--新增界面-->
        <el-dialog title="增加公告信息" v-model="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
                <el-form-item label="公告标题:" prop="noticeName">
                    <el-input v-model="addForm.noticeName" auto-complete="off"></el-input>
                </el-form-item>
                <!--公告详情应为文本域  -->
                <el-form-item label="公告详情:" prop="noticeInfo">
                    <el-input type="textarea" style="width:50%" v-model="addForm.noticeInfo" auto-complete="off"></el-input>
                </el-form-item>
                <!--公告时间选择日历插件
               -->
                <!--<el-form-item label="公告时间:" prop="noticeDate">
                    <el-input placeholder="请输入时间格式：yyyy-mm-dd" v-model="addForm.noticeDate" auto-complete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="公告时间:" prop="noticeDate">
                    <el-date-picker v-model="addForm.noticeDate" type="date" placeholder="请选择公告公布日期"
                                    :picker-options="pickerOptions" style="width: 217px; margin-right: 20px;">
                    </el-date-picker>
                </el-form-item>
                <!-- /*
                 * 针对人群可以用下拉列表
                 *
                 * */-->
                <!--<el-form-item label="针对人群:" prop="noticeTarget">
                    <el-input v-model="addForm.noticeTarget" auto-complete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="针对人群:" prop="noticeTargetStr">
                    <el-select v-model="addForm.noticeTargetStr" auto-complete="off" placeholder="请选择">
                        <el-option label="教师" value="1" ></el-option>
                        <el-option label="学生" value="0" ></el-option>
                    </el-select>
                </el-form-item>

                <!--<el-form-item label="创建时间:" prop="noticeCreateDate">
                    <el-input placeholder="new Date().getDate()" v-model="addForm.noticeCreateDate" auto-complete="off"></el-input>
                </el-form-item>-->
            </el-form>
            <el-col slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">保存</el-button>
            </el-col>
        </el-dialog>
        <!--新增的“编辑”页面  -->
        <!--编辑界面-->
        <el-dialog title="公告修改" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
                <!--<el-form-item label="公告编号：" prop="noticeId">
                    &lt;!&ndash;<el-input v-model="editForm.noticeId" auto-complete="off" disabled="true" type="hidden"></el-input>&ndash;&gt;
                    <el-input v-model="editForm.noticeId" auto-complete="off" disabled="true"></el-input>
                </el-form-item>-->
                <el-form-item label="公告标题：" prop="noticeName">
                    <el-input v-model="editForm.noticeName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="公告内容：" prop="noticeInfo">
                    <el-input v-model="editForm.noticeInfo" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="针对人群：" prop="noticeTargetStr">
                    <el-select v-model="editForm.noticeTargetStr" placeholder="请选择">
                        <!--前台写死取值-->
                        <el-option label="教师" value="1" ></el-option>
                        <el-option label="学生" value="0" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公告时间：" prop="noticeDateStr">
                    <el-date-picker v-model="editForm.noticeDateStr" align="right" type="date" placeholder="请输入公告时间"
                                    :picker-options="pickerOptions" style="width: 217px; margin-right: 20px;">
                    </el-date-picker>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit">提交</el-button>
            </div>
        </el-dialog>

        <!--查看界面-->
        <el-dialog title="公告信息查看" v-model="updateFormVisible" :close-on-click-modal="false">
            <el-form :model="aaaaa" label-width="100px" ref="aaaaa">
                <div style="overflow: auto; width: 100%;">
                    <table class="border-table">
                        <tr>
                            <td class="alt">公告编号:</td>
                            <td>{{aaaaa.noticeId}}</td>
                        </tr>
                        <tr>
                            <td class="alt">公告标题:</td>
                            <td>{{aaaaa.noticeName}}</td>
                        </tr>
                        <tr>
                            <td class="alt">公告详情:</td>
                            <td>{{aaaaa.noticeInfo}}</td>
                        </tr>
                        <tr>
                            <td class="alt">公告时间:</td>
                            <td>{{aaaaa.noticeDateStr}}</td>
                        </tr>
                        <tr>
                            <td class="alt">针对人群:</td>
                            <td>{{aaaaa.noticeTargetStr}}</td>
                        </tr>
                        <tr>
                            <td class="alt">创建时间:</td>
                            <td>{{aaaaa.notCreateDateStr}}</td>
                        </tr>
                        <tr>
                            <td class="alt">修改时间:</td>
                            <td>{{aaaaa.notModifyDateStr}}</td>
                        </tr>
                        <tr>
                            <td class="alt">修改人:</td>
                            <td>{{aaaaa.noticeModifyName}}</td>
                        </tr>
                    </table>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="scoreDetailVisible = false">取消</el-button>
            </div>

        </el-dialog>
    </el-col>
</template>

<script>
    import util from '../../common/js/util'
    import { getdata2, querynotice, addnotice, getlikedata ,editnotice ,deletenotice} from '../../api/api'

    export default {
        data() {
            return {
                pickerOptions:{
                    disabledDate(time){
                        return time.getTime() < Date.now() - 8e7;
                    },
                    shortcuts:[{
                        text: '今天',
                        onClick(picker){
                            picker.$emit('pick',new Date());
                        }
                    },{
                        text: '明天',
                        onClick(picker){
                            const date =new Date();
                            date.setTime(date.getTime() + 3600 * 1000 * 24);
                            picker.$emit('pick',date);
                        }
                    }, {
                        text: '一周后',
                        onClick(picker){
                            const date = new Date();
                            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                noticeId: '',
                total: 0,
                currentPage: 1,
                pageSize: 15,
                input: '',
                date1: '',
                date2: '',
                tableData: [],
                addFormVisible: false,//新增界面是否显示
                updateFormVisible: false,//查看界面是否显示
                addLoading: false,
                addFormRules:{
                    noticeName:[{required:true,message:'请输入公告标题',trigger:'blur'}],
                    noticeInfo:[{required:true,message:'请输入公告内容',trigger:'blur'}],
                    noticeDateStr:[{required:true,message:'请输入公告时间',trigger:'blur'}],
                    noticeTargetStr:[{required:true,message:'请输入针对人群',trigger:'blur'}],
                },
                aaaaa: [],
                //新增界面数据
                addForm: {
                    noticeId:'',
                    target: '',
                    noticeName: '',
                    noticeInfo: '',
                    noticeTargetStr: '',
                    noticeDate:''
                },
                selectForm: {
                    target: '',
                    noticeId: '',
                    noticeName: '',
                    noticeInfo: '',
                    noticeDateStr: '',
                    noticeTargetStr: '',
                    noticeCreateDateStr: '',
                    noticeModifyDateStr: '',
                    noticeModifyName: '',
                    noticeDel: '',
                },
                //新增的“编辑”页面
                editLoading: false,
                editFormVisible: false,//编辑界面是否显示
                editFormRules:{
                    noticeName:[{required:true,message:'请输入公告标题',trigger:'blur'}],
                    noticeInfo:[{required:true,message:'请输入公告内容',trigger:'blur'}],
                    noticeDateStr:[{required:true,message:'请输入公告时间',trigger:'blur'}],
                },
                //编辑界面数据
                editForm: {
                    noticeId: '',
                    noticeName: '',
                    noticeInfo: '',
                    noticeDateStr: '',
                    noticeTargetStr: ''
                },
            }
        },
        mounted() {

            this.handleIconClick();
        },
        methods: {
            //模糊查询
            handleIconClick() {
                let para = {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize
                };

                if (this.input != '') {
                    para.noticeName = this.input;
                }
                if (this.date1 != '' && this.date2 != '') {
                    para.startDate = util.formatDate.format(new Date(this.date1), 'yyyy-MM-dd');     // 开始日期
                    para.endDate = util.formatDate.format(new Date(this.date2), 'yyyy-MM-dd');     // 结束日期
                }

                getlikedata(para).then((res) => {
                    if (res.resCode != 0) {
                    this.$message({
                        message: res.resMsg,
                        type: 'error'
                    });
                } ;
                this.tableData = res.resData.list;
                this.total = res.resData.total;
                /*}*/
            });
            },
            // 分页组件
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.handleIconClick();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.handleIconClick();
            },

            //根据ID查询
            handleEdit(index, row) {
                let para = { noticeId: row.noticeId }
                this.updateFormVisible = true;
                querynotice(para).then((res) => {
                    //alert("ID" + para.noticeId)
                    this.aaaaa = res.resData;
                //alert(aaaaa.noticeName);

            })
            },


            //添加公告
            handleAdd() {
                this.addFormVisible = true;
                this.addForm = {
                    noticeName: '',
                    noticeInfo: '',
                    noticeTargetStr: '',
                    noticeDate: ''

                };
            },
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                        let para = Object.assign({}, this.addForm);
                        addnotice(para).then((res) => {
                            this.addLoading = false;
                        if (res.resCode != 0) {
                            this.$message({
                                message: res.resMsg,
                                type: '请正确填写内容'
                            });
                        } else {
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.$refs['addForm'].resetFields();
                            this.addFormVisible = false;
                            this.handleIconClick();//应该用mounted（）里的方法 来实现异步
                        }
                    });
                    });
                    }
                });
            },

            //显示编辑界面
            handleLook: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },

            //编辑

            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                        let para = {
                            noticeId:this.editForm.noticeId,
                            noticeName:this.editForm.noticeName,
                            noticeInfo:this.editForm.noticeInfo,
                            noticeDateStr:this.editForm.noticeDateStr,
                            noticeTargetStr:this.editForm.noticeTargetStr
                        };
                        editnotice(para).then((res) => {
                            this.editLoading = false;
                        if(res.resCode==0) {
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.handleIconClick();
                        }else{
                            this.$message({
                                message: '提交失败',
                                type: 'info'
                            });
                        }
                        this.$refs['editForm'].resetFields();
                        this.editFormVisible = false;
                    });
                    });
                    }
                });
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let para = { noticeId: row.noticeId };
                deletenotice(para).then((res) => {
                    this.listLoading = false;
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.handleIconClick();
            });
            }).catch(() => {

                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },

        }

    }
</script>
<style scoped>
    .border-table {
        border-collapse: collapse;
        border: none;
        width: 100%;
    }
    .border-table td {
        border: solid #dfe8ec 1px;
        background: #fff;
        font-size:14px;
        padding: 6px 6px 6px 12px;
        color: #009966;
        line-height:28px;
    }
    td.alt {
        width: 100px;
        background: #EFF2F7;
        color:#8492A6;
    }
</style>